<template>
  <el-drawer
    size="230px"
    :visible.sync="shows"
    direction="ltr"
    :with-header="false"
    class="drawer-view"
  >
    <div id="printContent" style="overflow: hidden">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="print-item"
        style="font-size: 12px; position: relative; height: 58mm"
      >
        <div>
          <span>卷号:</span>
          <span>{{ item.oid }}</span>
        </div>
        <div v-if="item.supplier">
          <span>供应商:</span>
          <span>{{ item.supplier }}</span>
        </div>
        <div>
          <span>型号:</span>
          <span>{{ item.frbaicName }}</span>
        </div>
        <div>
          <span>批号:</span>
          <span>{{ item.batchNumber }}</span>
        </div>
        <div>
          <span>米数:</span>
          <span>{{ item.inventoryQuantity }}</span>
        </div>
        <div>
          <span>日期:</span>
          <span>{{ item.createdTime }}</span>
        </div>

        <div v-if="item.doorwidth">
          <span>门幅:</span>
          <span>{{ item.doorwidth }}</span>
        </div>
        <div v-if="item.status">
          <span>工艺:</span>
          <span>{{ item.status }}</span>
        </div>
        <div v-if="item.iswaterproof">
          <span>防水:</span>
          <span>{{ item.iswaterproof }}</span>
        </div>
        <div v-if="item.leftempty">
          <span>左空:</span>
          <span>{{ item.leftempty }}</span>
        </div>
        <div v-if="item.rightempty">
          <span>右空:</span>
          <span>{{ item.rightempty }}</span>
        </div>
        <div v-if="item.flowertoflower">
          <span>花到花:</span>
          <span>{{ item.flowertoflower }}</span>
        </div>
        <div v-if="item.notespc">
          <span>备注:</span>
          <span>{{ item.notespc }}</span>
        </div>
        <div style="position: absolute; bottom: 4mm; right: 4mm">
          <div class="qrcode-pic" ref="qrcode"></div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import Qrcode from "qrcodejs2";
import printJS from "print-js";
export default {
  props: {
    show: Boolean,
    data: {
      type: Array,
    },
    type: String,
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    this.initData();
    setTimeout(() => {
      this.printHtml();
    }, 100);
  },
  methods: {
    initData() {
      this.list = [...this.data];

      this.$nextTick(() => {
        for (var i = 0; i < this.list.length; i++) {
          var item = this.list[i];
          this.$refs.qrcode[i].innerHTML = "";
          var qrcode = new Qrcode(this.$refs.qrcode[i], {
            text: item.oid,
            width: 60,
            height: 60,
            colorDark: "#333",
            colorLight: "#fff",
            correctLevel: Qrcode.CorrectLevel.L,
          });
        }
      });
    },
    getTodate() {
      let now = new Date();
      // 获取年、月、日、时、分、秒
      let year = now.getFullYear(); // 获取完整的年份(4位数字)
      let month = String(now.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以要加1
      let day = String(now.getDate()).padStart(2, "0"); // 获取日
      // 将年月日时分秒组合成字符串
      return `${year}-${month}-${day}`;
    },
    countLengthFun(data) {
      var lengths = 0;
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        lengths += Number(item.length);
      }
      lengths = Number(lengths.toFixed(2));
      return lengths;
    },
    printHtml() {
      const style =
        "@page {size:50mm 60mm; margin: 0; } @media print {margin: 0; padding: 0; }";
      printJS({
        printable: "printContent",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          this.shows = false;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-view {
  ::v-deep {
    .el-descriptions-row th {
      display: none;
    }
    .el-descriptions-row td {
      border: 1.5px solid #000;
      color: #000;
    }
  }
}

.header-view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    width: 60%;
  }
  .img-view {
    display: flex;
    align-items: center;
    &-img {
      height: 80px;
      img {
        height: 100%;
      }
    }
    &-mods {
      margin-left: 10px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    &-img {
      width: 80px;
      height: 80px;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
table,
td,
th {
  text-align: center;
  border: 1.5px solid #000;
  border-collapse: collapse;
}
</style>
